<template>
  <div v-if="data" class="reduction-page">
    <div>
      <div class="reduction-box">
        <div v-if="(data.dprice - data.num) <= 0" class="task-finish">恭喜你，任务已完成</div>
        <div class="w-full sum" :style="{letterSpacing: (data.dprice - data.num) > 0 ? '5px' :'1px'}"><div>{{ (data.dprice - data.num) <= 0 ? '获得' : '' }}立减金 <span class="font-lg">{{ data.dprice }}</span> 元</div></div>
        <div v-if="(data.dprice - data.num) > 0" class="w-full">
          <div class="w-full"> <span class="dialog-box"><small>还差{{ data.dprice - data.num }}元</small></span></div>
          <div style="width: 60%; margin: 0 auto;"><div class="progress-bar"><span class="inline" :style="{width: percentage + '%'}"></span></div></div>
          <!-- <div class="w-full" style="color: #fff; font-size: .2rem; margin-bottom: .4rem;">{{ data.end_time | fmtDate }} 结束</div> -->
          <div class="w-full" style="color: #fff; font-size: .2rem;">{{ `${+countdown.day > 0 ? countdown.day+' : ' : '' }${countdown.hour} : ${countdown.min} : ${countdown.sec} . ${countdown.ms}` }} 后结束</div>
        </div>

        <div class="acea-row" :class="data.uinfo.length > 1 ? 'row-around' : 'row-center'" style="width: 75%;" :style="{marginBottom: (data.dprice - data.num) <= 0 ? '4rem' : '0'}">
          <div v-for="(item, index) in data.uinfo" :key="index" style="text-align: center; font-size: .2rem; color: #ffe4c7; position: relative; padding: 0 3%; width: 1.8rem; margin-top: .3rem;">
            <img :src="item.avatar" alt="avatar" class="portrait">
            <span class="label">+{{ item.price }}元</span>
            <div class="text-ellipsis">{{ item.nickname }}</div>
          </div>
        </div>
      </div>

      <div class="acea-row row-between btn-box" v-if="(data.dprice - data.num) > 0">
        <div class="btn" @click="setShareInfoStatus">邀请好友</div>
        <div class="btn" @click="setShareInfoStatus">分享朋友圈</div>
      </div>
    </div>

    <!-- 领取信息轮播 -->
    <div class="news acea-row row-between-wrapper" v-if="ReceiveList">
      <div class="swiper-no-swiping swiperTxt">
        <swiper :options="swiperRoll">
          <swiper-slide
            class="swiper-slide"
            v-for="(item, index) in ReceiveList"
            :key="index"
          >
            <router-link
              to="/"
              class="acea-row row-between-wrapper"
              style="flex-wrap: nowrap"
            >
              <!-- <img style="width: 7%; border-radius: 50%;" :src="item.avatar" alt="user_portrait"> -->
              <div class="text line1" style="width: 80%;">{{ item }}</div>
              <!-- <div class="iconfont icon-xiangyou"></div> -->
            </router-link>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <ShareInfo
      v-on:setShareInfoStatus="setShareInfoStatus"
      :shareInfoStatus="shareInfoStatus"
    ></ShareInfo>
  </div>
</template>
<style scoped>
.task-finish {
  font-size: .6rem;
  color: #fff;
  margin-top: .3rem;
  margin-bottom: .2rem;
  text-shadow: 1px 1px 5px #9c0c0c;
}
.reduction-page {
  width: 100%;
  background: url('../../assets/images/zhenxing/reduction-bg.jpg') center top/100% no-repeat;
}

.reduction-box{
  text-align: center; display: flex; justify-content: center; flex-wrap: wrap; margin-top: 3.6rem;
}

.sum {
  color: #fff69f; font-size: .45rem;
}

.font-lg {
  font-size: .7rem; font-weight: bold; 
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.progress-bar {
  width: 100%;
  height: 9px;
  background-color: #b30000;
  border-radius: 30px;
  margin-top: .2rem;
  position: relative;
  overflow: hidden;
  margin-bottom: .1rem;
}

.progress-bar .inline {
  display: inline-block;
  height: inherit;
  background-color: #e4da73;
  border-radius: 30px;
  position: absolute;
  left: 0;
  
}

.dialog-box, .label {
  display: inline-block;
  height: .4rem;
  line-height: .4rem;
  text-align: center;
  padding: 0 .2rem;
  font-size: .3rem;
  color: brown;
  background-color: #e4da73;
  position: relative;
  z-index: 2;
  border-radius: 3rem;
  letter-spacing: 1px;
  transform: scale(.9);
  margin-top: .4rem;
}

.dialog-box small {
  position: relative;
  z-index: 5;
}

.dialog-box::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #e4da73;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  z-index: 1;
}

.portrait {
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
}

.label {
  transform: scale(.8);
  font-size: .2rem;
  height: .34rem;
  position: absolute;
  left: 0;
  width: 100%;
  top: 42%;
  margin-top: 0;
}

/* 分享按钮 */
.btn-box {
  margin: .5rem auto 3rem;
  width: 70%;
}
.btn {
  background-color: burlywood;
  border-radius: 5rem;
  color:#866108;
  padding: .16rem .5rem;
}

/* 顶部已领取垂直轮播 */
.news {
  width: 50%!important;
  position: fixed;
  top: 4%;
  z-index: 20;
  left: 5%;
  height: 0.6rem;
  width: 6.9rem;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 0.3rem;
  padding: 0 0.28rem;
  margin: 0 auto;
  overflow: hidden;
}
.news .iconfont {
  font-size: 0.3rem;
  color: #fff;
}
.news .swiper-slide {
  height: 100%;
}
.news .swiperTxt {
  /* width: 5.86rem; */
  width: 100%;
  height: 100%;
  line-height: 0.6rem;
  overflow: hidden;
}
.news .swiperTxt .swiper-container {
  height: 100%;
}
.news .swiperTxt .text {
  /* width: 5.55rem; */
  color: #fff;
  font-size: 0.26rem;
}
.news .swiperTxt .iconfont {
  font-size: 0.28rem;
  color: #fff;
}  
</style>
<script>
import "@assets/css/swiper.min.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getReductionActivity, getUser, getReductionReceiveList } from "@api/user";
import { countdown } from "@utils/common";
import { isWeixin } from "@utils/index";
import { getShare } from "@/api/public";
import { openShareAll, openShareAppMessage, openShareTimeline } from "@libs/wechat";
import ShareInfo from "@components/ShareInfo";
import cookie from "@utils/store/cookie";
import { mapGetters } from "vuex";
const NAME = "ReductionFund";

export default {
  name: "ReductionFund",
  computed: mapGetters(["userInfo", "shareOk"]),
  components: {
    swiper,
    swiperSlide,
    ShareInfo
  },
  data: function() {
    return {
      data: null,
      userInfo: {},
      ReceiveList: [],
      swiperRoll: {        // 底部固定轮播待拼团订单信息
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 800
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },

      countdown: null,
      shareInfoStatus: false,
    };
  },
  watch: {
    $route: function(n) {
      var that = this;
      if (n.name === NAME) {
        that.getReduction();
        this.$store.dispatch("USERINFO", true);
      }
    }
  },
  created: function() {
    this.getUser();
    // if (this.$route.query.spread) cookie.set("spread", this.$route.query.spread);
  },
  mounted: function() {
    console.log('reduction page', this.shareOK);
    if(this.shareOK === 'REDUCTION') {
      console.log('reduction is share OK');
      this.getReduction();
    }
  },
  computed: {
    percentage() {
      return Math.floor(this.data.num / this.data.dprice * 100);
    }
  },
  methods: {
    getUser: function() {
      getUser().then(res => {
        console.log('getUser', res);
        this.userInfo = res.data;
        this.getReduction();
        this.shareConfig();
      }).catch(err => {
        this.$dialog.error(res.msg);
      });
    },
    getReduction: function() {
      let that = this;
      getReductionActivity().then(res => {
        console.log('立减金活动', res);
        this.data = res.data;
        this.countdownStart();
        if (!this.data.uinfo) {
          this.data.uinfo = [
          //   {
          //   nickname: 'Chonjan',
          //   avatar: 'https://hbimg.huabanimg.com/243322a7ca6251d6e9ff000d8ed00526d97bef341eccb-v6lY2a_fw658/format/webp',
          //   price: 5
          // }, {
          //   nickname: 'Summi',
          //   avatar: 'https://hbimg.huabanimg.com/1158908ab071ddd63cbc15a902972c2100f4cd5b330f5-nx0dGB_fw658/format/webp',
          //   price: 3.33
          // }, 
          // {
          //   nickname: '夏日の海盐青柠',
          //   avatar: 'https://hbimg.huabanimg.com/1158908ab071ddd63cbc15a902972c2100f4cd5b330f5-nx0dGB_fw658/format/webp',
          //   price: 3.33
          // }
          ];
        }
        this.data.uinfo.unshift({
          nickname: '已奖励',
          avatar: this.userInfo.avatar,
          price: this.data.acprice
        });
      }).catch(err => {
        that.$dialog.error(err.msg)
      });

      getReductionReceiveList().then(res => {
        console.log('领取信息轮播', res);
        this.ReceiveList = res.data.info;
      });
    },

    // 分享引导
    setShareInfoStatus: function() {
      this.shareInfoStatus = !this.shareInfoStatus;
    },

    // 分享配置
    shareConfig() {
      getShare().then(res => {
        console.log('分享', res);
        let href = location.href.indexOf('?') === -1 ? location.href : location.href.split('?')[0];
        let config = {
          desc: `发现50元新手福利，看你能领多少！`,
          title: res.data.data.title,
          link: `${href}?spread=${this.userInfo.uid}`,
          // ${location.href.indexOf('?') === -1 ? '?' : '&'}
          imgUrl: `${location.protocol}//${location.hostname}/static/share/sign-share-img.jpg`,
        };
        isWeixin() && openShareAll(config)
      });
    },

    countdownStart: function() {
      // console.log(new Date().getTime() + (2*60*60*1000))
      let endTime = Number(this.data.end_time+'000'), ms = 10;
      console.log(endTime)
      let timer = setInterval(() => {
        ms--;    
        if (ms === -1) {
          ms = 9;
        }
        this.countdown = countdown(endTime, ms);
        if (this.countdown.stop) {
          clearInterval(timer);
        }
      }, 100);
    }
  }
};
</script>



